Skip to content

refactor: 이벤트 등록 네비게이션 설정#232

Merged
hyeeuncho merged 2 commits intodevelopfrom
refactor/#231/event-navigation
Jul 7, 2025
Merged

refactor: 이벤트 등록 네비게이션 설정#232
hyeeuncho merged 2 commits intodevelopfrom
refactor/#231/event-navigation

Conversation

@hyeeuncho
Copy link
Copy Markdown
Member

@hyeeuncho hyeeuncho commented Jul 7, 2025

Summary by CodeRabbit

  • 신규 기능

    • 메뉴 버튼 데이터에 ‘backPath’ 옵션이 추가되어, 특정 메뉴 이동 시 이전 경로로 돌아갈 수 있는 기능이 강화되었습니다.
  • 버그 수정

    • 없음
  • 스타일

    • 대시보드의 원형 차트 크기가 확대되어 시각적으로 더 크게 표시됩니다.
    • 응답 모달 및 티켓 정보 선택 화면의 텍스트가 작은 화면에서 더 잘 보이도록 반응형 글꼴 크기가 적용되었습니다.
  • 리팩터링

    • 이벤트 퍼널 단계 이동 방식이 숫자 기반에서 단계 이름 기반으로 변경되어, 단계 전환이 더 명확하게 이루어집니다.
    • 관련 함수 및 컴포넌트의 파라미터와 내부 로직이 이에 맞게 개선되었습니다.

@hyeeuncho hyeeuncho linked an issue Jul 7, 2025 that may be closed by this pull request
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jul 7, 2025

Walkthrough

이 변경사항은 이벤트 등록 단계 네비게이션을 인덱스 기반에서 단계명 기반으로 리팩토링하고, 여러 UI 컴포넌트의 반응형 텍스트 크기 및 차트 크기를 조정합니다. 또한 메뉴 버튼 데이터에 backPath 속성을 추가하고, 관련 네비게이션 로직을 업데이트하였습니다.

Changes

파일/경로 요약 변경 요약
src/features/dashboard/ui/MultiplePieCharts.tsx 파이 차트 컨테이너와 외부 반지름 크기를 증가하여 차트 시각 크기 확대
src/features/event/ui/EventFunnel.tsx 이벤트 등록 네비게이션을 인덱스 기반에서 단계명 기반으로 리팩토링, onPrev prop 제거, 명시적 단계 전환 적용
src/pages/menu/ui/MenuPage.tsx handleIconClick 함수에 backPath 파라미터 추가, 네비게이션 로직에 backPath 상태 전달 분기 추가
src/shared/types/menuType.ts buttonData 인터페이스에 backPath?: string 속성 추가, 이벤트 주최하기 버튼에 backPath 값 지정
src/widgets/dashboard/ui/response/ResponseModal.tsx h1 요소에 반응형(sm) 텍스트 크기 클래스 추가
src/widgets/dashboard/ui/ticket/SelectTicketInfo.tsx 티켓명/가격에 반응형(sm) 텍스트 크기 클래스 추가

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant EventFunnel
    participant StepComponent
    participant Navigation

    User->>StepComponent: 단계 내에서 '다음' 또는 '이전' 클릭
    StepComponent->>EventFunnel: goTo(단계명)
    EventFunnel->>Navigation: onNext(단계 인덱스)
    Note right of EventFunnel: 마지막 단계에서 handleCreateEvent 호출
    EventFunnel->>Navigation: 이벤트 생성 성공 시 단계 이동 또는 에러 처리
Loading

Possibly related issues

Suggested labels

🪄 Refactoring, 💖 Style

Suggested reviewers

  • Yejiin21

Poem

🐰
차트는 커지고, 글씨는 작아져,
이벤트 등록 흐름도 새롭게 바뀌었네!
메뉴 뒤로가기 길도 똑똑하게,
코드 속 토끼가 깡충깡충 기뻐하네.
변화의 바람에 귀를 쫑긋!
🥕✨

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@hyeeuncho hyeeuncho self-assigned this Jul 7, 2025
@hyeeuncho hyeeuncho added the 🪄 Refactoring 코드 리팩토링 label Jul 7, 2025
Copy link
Copy Markdown
Contributor

@Yejiin21 Yejiin21 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아주 굿입니다~(칭찬칭찬칭찬)

@github-actions
Copy link
Copy Markdown

github-actions bot commented Jul 7, 2025

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
src/features/dashboard/ui/MultiplePieCharts.tsx (1)

33-36: 고정 높이·반경 하드코딩 대신 반응형 값 고려 필요

350 px/90 px로 하드코딩하면 모바일(세로) 화면에서 차트가 잘리거나 스크롤이 과도하게 발생할 수 있습니다.
height·outerRadiusmin(containerWidth, 350) 또는 useWindowSize 훅으로 계산해 주면 레이아웃 깨짐을 방지할 수 있습니다.

-<ResponsiveContainer width="100%" height={350}>
+<ResponsiveContainer width="100%" height={Math.min(350, window.innerWidth * 0.8)}>
...
-<Pie ... outerRadius={90} ...
+<Pie ... outerRadius={Math.min(90, (window.innerWidth * 0.8) / 4)} ...

또는 aspect={1} 를 활용해 비율 기반으로 조정하는 방법도 있습니다.

src/pages/menu/ui/MenuPage.tsx (1)

11-14: state 값 하드코딩 개선 검토

네비게이션 로직이 올바르게 구현되었으나, 13번째 줄에서 backPath: '/menu'가 하드코딩되어 있습니다. 전달받은 backPath 파라미터를 사용하는 것이 더 유연할 것 같습니다.

다음과 같이 수정하는 것을 고려해보세요:

-      state: { backPath: '/menu' },
+      state: { backPath },
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4f510f4 and 330ebb7.

📒 Files selected for processing (6)
  • src/features/dashboard/ui/MultiplePieCharts.tsx (1 hunks)
  • src/features/event/ui/EventFunnel.tsx (8 hunks)
  • src/pages/menu/ui/MenuPage.tsx (2 hunks)
  • src/shared/types/menuType.ts (2 hunks)
  • src/widgets/dashboard/ui/response/ResponseModal.tsx (1 hunks)
  • src/widgets/dashboard/ui/ticket/SelectTicketInfo.tsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: storybook
🔇 Additional comments (14)
src/widgets/dashboard/ui/response/ResponseModal.tsx (1)

34-34: 반응형 텍스트 클래스 추가 👍

sm:text-sm 추가로 작은 화면 가독성이 개선되었습니다. 별다른 문제 없습니다.

src/widgets/dashboard/ui/ticket/SelectTicketInfo.tsx (1)

15-16: text-14 커스텀 유틸리티 클래스 존재 여부 확인 필요

Tailwind 기본 스케일에는 text-14 가 없습니다.
프로젝트에서 확장한 유틸리티라면 문제 없지만, 누락 시 빌드 타임에 경고가 발생하고 기본값(1rem)으로 폴백됩니다. text-base+tracking-… 등으로 대체하거나 tailwind.config.jstheme.fontSize 에 14 px을 등록했는지 확인해주세요.

src/shared/types/menuType.ts (2)

25-25: 타입 정의가 올바르게 추가되었습니다

선택적 backPath 속성이 적절히 정의되었습니다. 이는 이전 페이지로 돌아가는 네비게이션 기능을 지원하는 데 필요한 타입입니다.


34-34: 이벤트 호스팅 버튼에 backPath 설정이 적절합니다

이벤트 생성 플로우에서 메뉴 페이지로 돌아가는 경로가 명확하게 설정되었습니다. 이는 사용자 경험을 개선하는 좋은 변경사항입니다.

src/pages/menu/ui/MenuPage.tsx (3)

3-3: 필요한 타입 임포트가 올바르게 추가되었습니다

네비게이션 옵션을 지원하기 위해 필요한 타입들이 적절히 임포트되었습니다.


8-8: 함수 시그니처가 올바르게 업데이트되었습니다

backPath 파라미터가 추가되어 뒤로 가기 네비게이션을 지원할 수 있게 되었습니다. 타입 안전성도 확보되었습니다.


34-34: onClick 핸들러가 올바르게 업데이트되었습니다

새로운 backPath 속성이 적절히 전달되고 있습니다. 이는 menuType.ts의 변경사항과 일관성이 있습니다.

src/features/event/ui/EventFunnel.tsx (7)

10-10: 필요한 훅과 상태 관리가 올바르게 추가되었습니다

useLocation 훅과 useState가 추가되어 동적 backPath 관리가 가능해졌습니다. 네비게이션 상태에서 backPath를 가져오는 로직이 적절합니다.

Also applies to: 16-16, 23-24


18-18: 컴포넌트 인터페이스 단순화

onPrev 프로퍼티가 제거되어 컴포넌트 인터페이스가 단순해졌습니다. 이는 새로운 단계명 기반 네비게이션 시스템과 일관성이 있습니다.


26-41: 단계명 기반 네비게이션 시스템이 훌륭합니다

stepOrder 배열과 goTo 함수를 통한 단계명 기반 네비게이션은 매우 우수한 리팩토링입니다. 코드 가독성과 유지보수성이 크게 향상되었습니다.


43-55: 이벤트 생성 로직 분리가 적절합니다

handleCreateEvent 함수를 별도로 분리하여 단일 책임 원칙을 잘 따르고 있습니다. 성공/실패 시 네비게이션 로직도 명확합니다.


67-67: 호스트 생성 성공 핸들링이 개선되었습니다

goTo(StepNames.HostSelection)을 사용하여 명확한 단계 이동을 구현했습니다. 이는 새로운 네비게이션 시스템과 일관성이 있습니다.


81-82: 모든 단계별 네비게이션이 일관되게 업데이트되었습니다

각 단계의 onNextonPrev 핸들러가 goTo 함수를 사용하여 명확한 단계명으로 네비게이션하도록 업데이트되었습니다. 특히 마지막 단계에서 handleCreateEvent()를 호출하는 로직이 적절합니다.

Also applies to: 92-92, 101-102, 111-112, 120-121, 130-131, 140-141, 148-149


82-82: 동적 backPath 사용이 훌륭합니다

메뉴 페이지에서 전달받은 backPath 상태를 활용하여 초기 단계의 뒤로 가기 네비게이션을 구현한 것이 매우 좋습니다. 이는 사용자 경험을 크게 개선합니다.

@hyeeuncho hyeeuncho merged commit e5aae60 into develop Jul 7, 2025
2 checks passed
@hyeeuncho hyeeuncho deleted the refactor/#231/event-navigation branch July 7, 2025 09:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🪄 Refactoring 코드 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[refactor] 이벤트 등록 네비게이션 설정

2 participants